<template>
  <div id="app">
    <!-- <p>231</p> -->
    <div class="edit" v-if="checked">
      <h1>修改信息</h1>
      <div class="shurukuang">
        <p>昵称：&nbsp;&nbsp;&nbsp;</p>
        <input type="text" v-model="userinfo.nickname" />
      </div>

      <div class="shurukuang">
        <p>手机号：</p>
        <input type="text" v-model="userinfo.pho" />
      </div>

      <div class="shurukuang">
        <p>地址：&nbsp;&nbsp;&nbsp;</p>
        <input type="text" v-model="userinfo.add" />
      </div>

   
      <button class="tijiao" @click="edituser()">提交</button>
    </div>
    <button class="toedit" @click="checked = !checked">修改信息</button>
    <br />
    <h2>该用户参与的订单</h2>
    <br />
    <el-main>
      <el-table
        :data="tableData"
        border
        stripe
        :header-cell-class-name="headerBg"
      >
        <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column prop="email" label="用户账号" width="220">
        </el-table-column>
        <el-table-column prop="orderId" label="订单编号" width="220">
        </el-table-column>
        <el-table-column prop="goods_name" label="商品名字" width="220">
        </el-table-column>
        <el-table-column prop="createTime" label="订单创建日期" width="220">
        </el-table-column>
        <el-table-column prop="orderStatus" label="订单状态" width="220">
        </el-table-column>
        <el-table-column prop="orderPrice" label="订单金额"> </el-table-column>
       
      </el-table>
  
    </el-main>
  </div>
</template>
<script>
import router from "../../router";
import qs from "qs";
export default {
  data() {
    return {
      total: 0,
      pageNum: 1,
      pageSize: 3,
      checked: false,
      userinfo: { nickname: "", password: "", pho: "", add: "" },
      headerBg: "headerBg",
       tableData: [
        // {
        //   orderId: "",
        //   createTime: "",
        //   user: "",
        //   orderStatus: "",
        //   orderPrice: "",
        // },
      ],
      user: "",
    };
  },

  mounted() {
    this.load();
 
  },
  methods: {
       //时间转换(js将 “2021-07-06T06:23:57.000+00:00” 转换为年月日时分秒)
    transformTimestamp(timestamp) {
      let a = new Date(timestamp).getTime();
      const date = new Date(a);
      const Y = date.getFullYear() + "-";
      const M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      const D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + "  ";
      const h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      const m =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      // const s = date.getSeconds(); // 秒
      const dateString = Y + M + D + h + m;
      // console.log('dateString', dateString); // > dateString 2021-07-06 14:23
      return dateString;
    },
    load() {
      this.$axios
        .get("/user/orderPage", {
          headers: {
            "x-access-token": localStorage.getItem("x-access-token"),
          },
        })
        .then((res) => {
           console.log(res);
            var resData = res.data.extend.result;
            for (var i = 0; i < resData.length; i++) {
                  resData[i].orderId = resData[i].OrderId ;
              resData[i].orderPrice = resData[i].order_price + "元";
              resData[i].createTime = this.transformTimestamp(
                resData[i].create_time
              );
              if (resData[i].order_status == "1") {
                resData[i].orderStatus = "订单进行中";
              } else if (resData[i].order_status == "2") {
                resData[i].orderStatus = "订单异常";
              } else if (resData[i].order_status == "0") {
                resData[i].orderStatus = "订单已完成";
              }
            }
            
            this.tableData=resData;
 
        });
    },
    edituser() {
        this.nickName=this.userinfo.nickname,
        this.phone=this.userinfo.pho,
        this.address= this.userinfo.add;

      this.request
        .post("/user/registUser?nickName="+this.nickName+"&phone="+ this.phone+"&address="+this.address+"&password="+this.password)
        // .post("/user/registUser",params1)
        .then((res) => {
           
          alert("修改成功");
        });
    },
    gotoSeckill() {
      this.$axios
        .get("/seckill/gotoSeckillPage", {
          headers: {
            "x-access-token": localStorage.getItem("x-access-token"),
          },
        })
        .then((res) => {
          if (res.data.code == 200 && res.data.extend.result == "登陆成功") {
            router.push("./seckillpage/index");
          } else if (
            res.data.code == 401 &&
            res.data.extend.result == "用户不存在！"
          ) {
            this.$message.error("请先登录账号，才能参与秒杀活动");
          } else if (
            res.data.code == 401 &&
            res.data.extend.result == "token已过期，请重新登录"
          ) {
            this.$message.error("您已经很久没登录了，请重新登录");
          }
        });
    },
  },
};
</script>
<style>
#app {
  width: 100%;
  height: 100%;
}
.edit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  width: 25rem;
  height: 35.5rem;
  background-color: #fff;
  z-index: 100;
  border: 1px solid black;
  border-radius: 3.125rem;
}
.edit h1 {
  text-align: center;
  padding-top: 1.25rem;
  padding-bottom: 3.75rem;
}
.edit {
  /* position: relative; */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center; */
}
.shurukuang {
  display: flex;
  padding-bottom: 2.5rem;
}
.tijiao {
  position: absolute;
  bottom: 4.75rem;
  right: 2.25rem;
  width: 6.5rem;
  height: 2rem;
}
.toedit {
  position: absolute;
  top: 5.75rem;
  right: 28.25rem;
  width: 6.5rem;
  height: 2rem;
}
</style>